<template>
  <view class="" :class="ggclass">
    <uni-popup ref="popRef" @close="close" :safe-area="false">
      <view class="picker-view-box" :style="{background:backgrounds}">
        <view class="picker-title">
          <text class="" @click="close">取消</text>
          <view class="font_s32 font-weight">{{ title }}</view>
          <text class="blue" @click="submit">确定 </text>
        </view>
        <picker-view
          v-if="visible"
          :indicator-style="indicatorStyle"
          :value="values"
          @change="bindChange"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in years" :key="index"
              >{{ item }}年</view
            >
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in months" :key="index"
              >{{ item }}月</view
            >
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in days" :key="index"
              >{{ item }}日</view
            >
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import {
  defineProps,
  reactive,
  toRefs,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
const { proxy } = getCurrentInstance() as any;
import { dateFilter as filter } from "../ways/filter.js";
const date = new Date();
const props = defineProps({
  title: {
    type: String,
    default: "自定义",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  value: {
    type: Array,
    default: () => [2022, date.getMonth(), date.getDate() - 1],
  },
  range_key: {
    type: String,
    default: "name",
  },
  range_value: {
    type: String,
    default: "id",
  },
  immediate: {
    type: Boolean,
    default: false,
  },
  ggclass: {
    type: String,
    default: "",
  },
});
interface stateType {
  visible: boolean;
  years: number[];
  year: number;
  months: number[];
  month: number;
  days: number[];
  day: number;
  values: number[];
  indicatorStyle: string;
  params: any;
}
const state: stateType = reactive({
  years: [],
  year: date.getFullYear(),
  months: [],
  month: date.getMonth() + 1,
  days: [],
  day: date.getDate(),
  values: [],
  visible: false,
  indicatorStyle: `height: 50px;`,
  params: {},
});
const {
  years,
  year,
  months,
  month,
  days,
  day,
  values,
  visible,
  indicatorStyle,
  params,
} = toRefs(state);
onMounted(() => {
  for (let i = 1990; i <= date.getFullYear(); i++) {
    state.years.push(i);
  }
  state.months = getMonths(state.year);
  state.days = getDate(state.year, state.month);
});

const getMonths = (year: number) => {
  let months = [];
  let num = 0;
  if (year == state.year) {
    num = date.getMonth() + 1;
  } else {
    num = 12;
  }
  for (let i = 1; i <= num; i++) {
    months.push(i);
  }
  return months;
};
const getDate = (year: number, month: number) => {
  let days = [];
  let num = 0;
  if (year == state.year && month == state.month) {
    num = date.getDate();
  } else {
    num = new Date(year, month, 0).getDate();
  }
  for (let i = 1; i <= num; i++) {
    days.push(i);
  }
  return days;
};
const open = () => {
  if (props.disabled) return;
  proxy.$refs.popRef.open("bottom");
  state.visible = true;
  setValues();
};
const close = () => {
  proxy.$refs.popRef.close();
  state.visible = false;
};
const setValues = () => {
  let defaultValues: any = filter(date).split("-");
  state.values = [
    state.years.findIndex((v) => v == defaultValues[0]),
    state.months.findIndex((v) => v == defaultValues[1]),
    state.days.findIndex((v) => v == defaultValues[2]),
  ];
  bindChange({ detail: { value: state.values } });
};
const bindChange = (e: any) => {
  const val = e.detail.value;
  let year = state.years.find((v, i) => val[0] == i) as number;
  let month = state.months.find((v, i) => val[1] == i) as number;
  let day = state.days.find((v, i) => val[2] == i);
  state.months = getMonths(year);
  state.days = getDate(year, month - 1);
  let data = [year, month, day].join("-");
  state.params = data;
};
const backgrounds = computed(() => {
  return proxy.$color.theme.pageBgColor;
})
const submit = () => {
  close();
  uni.showLoading();
  let time = setTimeout(() => {
    proxy.$emit("submit", filter(state.params, "yyyyMMdd"));
    proxy.$emit("input", filter(state.params, "yyyyMMdd"));
    proxy.$emit("update:name", filter(state.params, "yyyy年MM月dd日"));
    uni.hideLoading();
    clearTimeout(time);
  }, 1000);
};
</script>
<style lang="scss" scoped>
.picker-view-box {
  position: relative;
  z-index: 1000;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
}

.picker-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}

.picker-view {
  width: 750rpx;
  height: 500rpx;
  // margin-top: 20rpx;
}

.item {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
